<template>
  <div>
    <h4 class="boardName" @click="gotoClasses">
      班次预览
      <a-icon type="right" />
    </h4>
    <div class=" lightBox setBox" >
      <div style="width:60%;float: left" class="calendarBox">
        <a-calendar v-model="selectTime" :header-render="headerRender" @panelChange="onPanelChange" @select="selectDay">
          <template slot="dateCellRender" slot-scope="value">
            <div v-if="getdate(value)" class="notes-month">
              <span class="dateSpan"></span>
            </div>
          </template>
        </a-calendar>
      </div>
      <div style="width: 40%;float:right" class="classesList">
        <ul v-if="ShiftByDayList.length > 0">
          <li v-for="(item, index) in ShiftByDayList" :key="index" v-if="index <= 2" @click="gotoThat(index)">
            <h5>
              {{ item.shiftName }}
              <span>
                详情
                <a-icon type="right" />
              </span>
            </h5>
            <p>
              <span>上班时间：</span>
              {{ item.startTime }}
            </p>
            <p>
              <span>产出件数：</span>
              {{ item.produceCount }}件
            </p>
          </li>
        </ul>
        <a-empty style="margin-top:100px" v-else />
      </div>
    </div>
  </div>
</template>

<script>
import { getLastDay, timeCalculation } from '../../../../unit/tool';
import api from '@/api/workshop';
export default {
  name: 'index',
  props: {
    // ShiftByDayList: {
    //   type: Array,
    //   default: () => []
    // },
    getAllDayList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      params: {},
      ShiftByDayList: [],
      selectTime: '',
    };
  },
  created() {
    this.params.day = timeCalculation(new Date(), 'subtract', 0);
    this.selectTime = this.params.day;
    this.getShiftByDay();
  },
  methods: {
    gotoClasses() {
      this.$store.commit('board/HeadNavType', 2);
      localStorage.setItem('navType', 2);
      this.$router.push(`/classeslist?selectTime=${this.selectTime}`);
    },
    gotoThat(index) {
      this.$store.commit('board/HeadNavType', 2);
      localStorage.setItem('navType', 2);
      this.$router.push(`/classeslist?selectIndex=${index}&selectTime=${this.selectTime}`);
    },
    selectDay(value) {
      this.params.day = value.format('YYYY-MM-DD');
      this.selectTime = value.format('YYYY-MM-DD');
      this.getShiftByDay();
    },
    getdate(value) {
      let flag = false;
      flag = this.getAllDayList.find((item) => item == value.format('YYYY-MM-DD')) ? true : false;
      return flag;
    },
    onPanelChange(value) {
      let date = value.format('YYYY-MM-DD');
      let datelist = date.split('-');
      let params = {};
      params.startTime = datelist[0] + '-' + datelist[1] + '-01';
      params.endTime = datelist[0] + '-' + datelist[1] + '-' + getLastDay(datelist[0], datelist[1]);
      this.$emit('input', params);
    },
    //班次列表
    getShiftByDay() {
      let params = {
        companyId: localStorage.getItem('compid'),
        day: this.params.day,
        username: localStorage.getItem('userName'),
      };
      api.getShiftByDay(params).then((res) => {
        this.ShiftByDayList = res.data;
      });
    },
    //  日历自定义头部
    headerRender({ value, type, onChange, onTypeChange }) {
      const start = 0;
      const end = 12;
      const monthOptions = [];

      const current = value.clone();
      const localeData = value.localeData();
      const months = [];
      for (let i = 0; i < 12; i++) {
        current.month(i);
        months.push(localeData.monthsShort(current));
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>
        );
      }
      const month = value.month();

      const year = value.year();
      const options = [];
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class="year-item">
            {i}
          </a-select-option>
        );
      }
      return (
        <div style={{ padding: '3px' }}>
          <a-row type="flex" justify="center">
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                class="my-year-select"
                onChange={(newYear) => {
                  const now = value.clone().year(newYear);
                  onChange(now);
                }}
                value={String(year)}
              >
                {options}
              </a-select>
            </a-col>
            <a-col style="margin-left:">
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                value={String(month)}
                onChange={(selectedMonth) => {
                  const newValue = value.clone();
                  newValue.month(parseInt(selectedMonth, 10));
                  onChange(newValue);
                }}
              >
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../light.less';
.setBox {
  margin-top: 2px;
  height: 422px;
  padding: 20px;
  overflow-y: auto;
}
.calendarBox {
  ::v-deep .ant-fullcalendar-date {
    border-top: 1px solid #e8e8e8 !important;
    border-left: 1px solid #e8e8e8 !important;
    //border-right:1px solid #e8e8e8!important;
    height: 0.5rem;
    margin: 0;
    padding: 0;
  }

  ::v-deep .ant-fullcalendar table {
    border-right: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-top: 1px solid #e8e8e8 !important;
  }

  ::v-deep thead {
    border-left: 1px solid #e8e8e8 !important;
  }

  ::v-deep .ant-fullcalendar-content {
    height: 50% !important;
  }

  ::v-deep .ant-fullcalendar-selected-day {
    .dateSpan {
      color: #fff !important;
    }

    .ant-fullcalendar-date {
      color: #fff !important;
      background: linear-gradient(0deg, #1991eb 0%, #2ea1f8 100%) !important;
    }

    .ant-fullcalendar-value {
      color: #fff !important;
      text-align: center;
    }
  }

  ::v-deep .ant-fullcalendar-value {
    text-align: center !important;
  }

  ::v-deep .notes-month {
    text-align: center !important;
  }

  .dateSpan {
    color: #289df5;
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fbc225;
    border-radius: 50%;
    margin: 0 auto;
  }
}
</style>
